<template>
  <div class="content" id="OwnerManagement" v-loading="loading">
    <!--头部-->
    <div class="header-setting">
      <a-breadcrumb class="breadcrumb">
        <a-breadcrumb-item>
          <a href="../main">首页</a>
        </a-breadcrumb-item>
        <a-breadcrumb-item>清分管理-</a-breadcrumb-item>
        <a-breadcrumb-item>业主列表</a-breadcrumb-item>
      </a-breadcrumb>
      <!--查询条件-->
      <div class="box-condition-body">
        <div class="box-condition-item" style="justify-content: flex-start">
          <div
            style="
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-right: 50px;
            "
          >
            <template>
              <a-input-search
                placeholder="业主名称"
                style="width: 200px"
                @change="delayedTime"
                v-model="landlordName"
              />
            </template>
          </div>
        </div>
      </div>
    </div>

    <!--表单-->
    <div class="box-form">
      <!--工具栏-->
      <div class="box-tool">
        <div class="box-title">
          共计<span>{{ pagination.total }} </span>条信息
        </div>
        <div style="display: flex">
          <a-button type="primary" @click="addLandLord">新增业主</a-button>
          <a-button type="primary" @click="upadteLandLord">编辑业主</a-button>
        </div>
      </div>

      <!--数据表格-->
      <div class="box-table">
        <a-table
          :columns="columns"
          :dataSource="dataSource"
          :pagination="pagination"
          bordered
          size="small"
          :rowClassName="setRowClassName"
          @change="tableChange"
          :rowKey="(record) => record.id"
          :customRow="customRow"
        >
          <template slot="type" slot-scope="text">
            <template v-if="text == 0"> 未结算 </template>
            <template v-else-if="text == 1"> 结算中 </template>
            <template v-else-if="text == 2"> 已结算 </template>
          </template>
        </a-table>
      </div>
    </div>

    <!--编辑修改-->
    <a-modal
      :title="showTitle"
      v-model="showEquipmentModelView"
      :width="400"
      @ok="editClick"
      @cancel="hideAddPages"
    >
      <div class="viewBody">
        <div class="viewItem">
          <div class="itemText itemText1">业主名称</div>
          <div style="margin: 0 50px 0 0px; width: 200px">
            <a-input placeholder="业主名称" v-model="user.landlordName" />
          </div>
        </div>
        <div class="viewItem">
          <div class="itemText itemText1">城区</div>
          <div style="margin: 0 50px 0 0px; width: 200px">
            <a-input placeholder="城区" v-model="user.city" />
          </div>
        </div>
        <div class="viewItem">
          <div class="itemText itemText1">可结算金额(分)</div>
          <div style="margin: 0 50px 0 0px; width: 200px">
            <a-input
              placeholder="可结算金额"
              onkeyup="value=value.replace(/[^\d]/g,'')"
              v-model="user.canSettledMoney"
            />
          </div>
        </div>
        <div class="viewItem">
          <div class="itemText itemText1">结算中金额(分)</div>
          <div style="margin: 0 50px 0 0px; width: 200px">
            <a-input
              placeholder="结算中金额"
              onkeyup="value=value.replace(/[^\d]/g,'')"
              v-model.number="user.settlingMoney"
            />
          </div>
        </div>
        <div class="viewItem">
          <div class="itemText itemText1">账期(天)</div>
          <div style="margin: 0 50px 0 0px; width: 200px">
            <a-input
              placeholder="账期(天)"
              onkeyup="value=value.replace(/[^\d]/g,'')"
              v-model.number="user.paymentDay"
            />
          </div>
        </div>
        <div class="viewItem">
          <div class="itemText itemText1">分润比例</div>
          <div style="margin: 0 50px 0 0px; width: 200px">
            <a-input
              placeholder="分润比例"
              onkeyup="value=value.replace(/[^\d]/g,'')"
              v-model.number="user.splitRatio"
            />
          </div>
        </div>
        <div class="viewItem">
          <div class="itemText itemText1">手机号</div>
          <div style="margin: 0 50px 0 0px; width: 200px">
            <a-input
              placeholder="手机号"
              onkeyup="value=value.replace(/[^\d]/g,'')"
              v-model.number="user.phoneNum"
            />
          </div>
        </div>
        <div class="viewItem">
          <div class="itemText itemText1">身份证号</div>
          <div style="margin: 0 50px 0 0px; width: 200px">
            <a-input
              placeholder="身份证号"
              onkeyup="value=value.replace(/[^\d]/g,'')"
              v-model.number="user.idCard"
            />
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import apiClarify from "../../api/sorting/landlord";
import Landlord from "../../api/sorting/landlord";
// 标题行
const columns = [
  {
    title: "业主编号",
    dataIndex: "id",
  },
  {
    title: "业主名称",
    dataIndex: "landlordName",
  },
  {
    title: "城区",
    dataIndex: "city",
    // scopedSlots: { customRender: "type" },
  },
  {
    title: "可结算金额(元)",
    dataIndex: "canSettledMoney",
  },
  {
    title: "结算中金额(元)",
    dataIndex: "settlingMoney",
  },
  {
    title: "上次结算日期",
    dataIndex: "lastPayDay",
  },
  {
    title: "账期(天)",
    dataIndex: "paymentDay",
  },
];

const dataSource = [];

const queryCondition = {
  limit: "100",
  curr: "1",
  landlordName: "",
};

export default {
  name: "coupon",
  data() {
    return {
      /**表格**/
      columns: columns,
      dataSource: dataSource,
      /*分页插件*/
      pagination: {
        showTotal: (total) => `共${total}条`,
        total: 0,
        current: 1,
        defaultCurrent: 1,
        showQuickJumper: true,
        defaultPageSize: 100,
      },
      tableState: {
        rowId: -1,
      },
      /*当前选中的行数据*/
      currRowData: "",

      //业主名称 id
      landlordName: "",

      showEquipmentModelView: false,
      showTitle: "新增业主",
      operation: 1,

      //新增业主
      user: {
        landlordName: "",
        city: "",
        canSettledMoney: "",
        settlingMoney: "",
        lastPayDay: "",
        paymentDay: "",
        splitRatio: "",
        phoneNum: "",
        idCard: "",
      },
      scroll: 550,
      upadteUser: "",
      timer: null,
      loading:false
    };
  },

  methods: {
    /**组件部分相关方法**/
    tableChange(page) {
      this.queryCondition.curr = page.current;
      this.queryData();
      this.queryCondition.curr = 0;
    },
    customRow(record) {
      return {
        on: {
          // 事件
          click: () => {
            this.upadteUser = record;
            this.tableState.rowId = record.id;
          },
        },
      };
    },
    setRowClassName(record) {
      return record.id === this.tableState.rowId ? "clickRowStyl" : "";
    },

    /** 操作相关(crud) **/
    queryData() {
      this.loading = true;
      let items = {
        landlordName: this.landlordName,
      };
      let params = Object.assign({}, this.queryCondition, items);
      apiClarify
        .postListLandlordInfo(params)
        .then((data) => {
          let { list, total, pageNum, pageSize } = data.data;
          let array = list || [];
          array = array.map((item, index) => {
            return { ...item, no: total - (pageNum - 1) * pageSize - index };
          });
          this.dataSource = array;
          this.pagination.total = total;
          this.pagination.current = pageNum;
          this.loading = false;
        })
        .catch((err) => {
          console.log(err);
          this.loading = false;
        });
    },
    //新增业主
    addLandLord() {
      this.showTitle = "新增业主";
      this.operation = 1;
      this.showEquipmentModelView = true;
    },
    upadteLandLord() {
      this.showTitle = "编辑业主";
      this.operation = 2;

      if (!this.upadteUser) {
        this.$message.warning("请选择要编辑的业主！");
        return;
      } else {
        this.user = this.upadteUser;
      }
      this.showEquipmentModelView = true;
    },
    async editClick() {
      if (this.operation == 1) {
        await Landlord.postAddLandlord(this.user)
          .then((data) => {
            if (data.code == 200) {
              this.$message.success("添加成功！");
            }
          })
          .catch((err) => {
            console.log(err);
            this.$message.error("添加失败！");
          });
      } else {
        await Landlord.postUpdateLandlord(this.user)
          .then((data) => {
            if (data.code == 200) {
              this.$message.success("编辑成功！");
            }
          })
          .catch((err) => {
            console.log(err);
            this.$message.error("编辑失败！");
          });
      }

      await this.hideAddPages();
    },
    /*隐藏遮罩层*/
    hideAddPages() {
      this.showEquipmentModelView = false;
      this.upadteUser = "";
      this.tableState.rowId = -1;
      for (let key in this.user) {
        this.user[key] = "";
      }
      this.queryData();
    },
    delayedTime() {
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(this.queryData, 800);
    },
  },
  /*页面初始化渲染后执行*/
  mounted() {
    this.queryData();
  },
};
</script>

<style lang="less" scoped>
.ant-table td {
  white-space: nowrap;
}

.content {
  width: 100%;
  height: 100%;
}

.header-setting {
  width: 100%;
  height: 174px;
  background: #fff;
}

.header-setting .breadcrumb {
  margin-left: 41px;
  padding-top: 15px;
}

/*表格行选中背景颜色*/
.clickRowStyl {
  background-color: #c1e0fd;
}

.box-condition-body {
  padding-left: 40px;
  padding-right: 40px;
  background: #fff;
}

.box-condition-item {
  display: flex;
  align-items: center;
  margin: 20px 0;
}

/* 表单 */
.box-form {
  padding-left: 40px;
  padding-right: 40px;
  min-height: 705px;
  background: #fff;
  margin-top: 8px;
}

.box-form .box-tool {
  padding-top: 11px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.box-form .box-table {
  margin-top: 12px;
}

.box-tool button {
  margin: 0 0 0 10px;
}

/*轮播*/
.modalBox {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.modalBox .playImg {
  position: relative;
  width: 60%;
}

.modalBox .fromBox {
  width: 35%;
}

.modalBox .fromBox input {
  margin-bottom: 15px;
}

.modalBox .playImg ul.imgList {
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
}

.modalBox .playImg .img {
  width: 100%;
  height: 200px;
}

.modalBox .playImg .img img {
  display: block;
  width: 100%;
  height: 100%;
}

.modalBox .playImg .pointBox {
  position: absolute;
  bottom: 10px;
  width: 100%;
}

.modalBox .playImg .pointBox ul {
  display: flex;
  justify-content: center;
}

.modalBox .playImg .pointBox li.point {
  width: 10px;
  height: 10px;
  display: inline-block;
  border-radius: 50%;
  margin: 0 10px;
  background: #000;
}

.modalBox .playImg .pointBox li.active {
  background: #ff7255;
}

.array {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  opacity: 1;
  position: absolute;
  font-size: 30px;
}

.array .left,
.array .right {
  color: #fafafa;
  cursor: pointer;
}

/*.array .right{color:#999;cursor:pointer}*/
.array .left:hover {
  color: #333;
}

.array .right:hover {
  color: #333;
}

/* box-correction-popup */
.box-correction-popup {
  padding: 20px;
  height: 555px;
  /* flex */
  display: flex;
  align-items: center;
}

.box-correction-popup .box-image {
  padding: 0 15px;
  width: 888px;
  height: 500px;
}

.box-correction-popup .box-image .icon-image {
  width: 100%;
  height: 100%;
}

.box-correction-popup .box-correct {
  margin: 0 15px;
  width: 310px;
  height: 500px;
}

.box-correction-popup .box-correct .item-correct {
  margin-top: 20px;
  display: flex;
  align-items: center;
}

.box-correction-popup .box-correct .item-correct .text-correct {
  font-weight: 300;
  font-size: 14px;
  width: 100px;
}

.box-correction-popup .box-correct .item-correct .text-value {
  font-weight: 300;
  font-size: 14px;
  line-height: 1.428571429;
  color: #020202;
}

/* box-dispatch-item */
.box-dispatch-item {
  display: flex;
  align-items: center;
}

.box-dispatch-item .text-key {
  width: 200px;
  /* text */
  font-size: 14px;
  font-weight: 300;
  color: #797979;
}

.box-dispatch-item .text-value {
  width: 265px;
}

.box-title {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.box-title span {
  display: inline-block;
  background: cornflowerblue;
  border-radius: 5px;
  padding: 10px 25px;
  color: #fff;
  font-size: 14px;
  margin: 2% 4%;
  cursor: pointer;
}

#OwnerManagement {
  /deep/.ant-table-body {
    margin: 0;
  }
}
</style>
